<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box</title>
</head>
<body style="margin:0px">
    <div style="background:lightcoral; height: 120px;"></div>
    <div style="overflow: hidden; background: #ccc center; width: 800px; margin: 30px auto; padding: 10px; height: 870px;">
        <div style="height: 150px;background: blue; margin-bottom: 10px;"></div>
        <div style="float: left; height: 500px; width: 570px; padding-right: 10px; background: red;"></div>
        <div style="float: right; height: 500px; width: 200px; background: green;"></div>
        <div style="height: 150px; width: 200px; background: pink; padding-bottom: 10px;"></div>
    </div>
    <div style="background:lightcoral; height: 120px;"></div>
</body>
</html>